<template>
  <div id="sign-statistics">
    <div class="jx-content">
      <div class="sign-st-title">赛题统计</div>
      <div class="sign-st-content">
        <div class="sign-st-left">
          <el-progress
            type="circle"
            width="100"
            stroke-width="14"
            :percentage="50"
            color="#8e71c7"
          ></el-progress>
        </div>
        <div class="sign-st-right">
          <div>
            <div><span class="st-green">0</span>/101</div>
            <div>已提交</div>
            <img class="st-icon" src="@/assets/images/SignStatistics-true.png" alt="" />
          </div>
          <div>
            <div>0/101</div>
            <div>未提交</div>
            <img class="st-icon" src="@/assets/images/SignStatistics-false.png" alt="" />
          </div>
          <div class="st-myrank">
            <div>我的成绩</div>
            <div>第<span class="st-red">2</span>名</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    init() {},
  },
};
</script>
<style lang="scss">
#sign-statistics {
  .jx-content {
    width: 100%;
    height:212px;
    padding: 24px;
    .sign-st-title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #2a3645;
      margin-bottom: 24px;
    }
    .sign-st-content {
      display: flex;
      .sign-st-left {
      }
      .sign-st-right {
        > div {
          display: flex;
          align-items: center;
          > div {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #555555;
            margin-left: 20px;
            .st-green {
              color: #3ccc9e;
            }
            .st-red {
              color: #ff0000;
            }
          }
          .st-icon {
            margin-left: 10px;
          }
        }
        .st-myrank{
            margin-top: 14px;
        }
      }
    }
  }
}
</style>
